<template>
	<!-- 我的资料 -->
	<view class="zil">
		<!-- 头像 -->
		<view class="nicens" v-show="xianstx">
			<text style="font-size: 31rpx;margin-left: 31rpx;">头像</text>
			<view @tap="upfiles">
				<image :src="toxiang" mode="" style="width: 90rpx;height: 90rpx;border-radius: 50rpx;margin-right: 26rpx;transform: translateY(15rpx);"></image>
				<image src="../../static/jiantou.png" style=" width: 12.8rpx;height: 22rpx;margin-right: 19rpx;"></image>
			</view>
		</view>
		<!-- 昵称 -->
		<view :class="xianstx===true?'nicen':'nicenr'">
			<text style="font-size: 31rpx;margin-left: 31rpx;">昵称</text>
			<view>
				<input type="text" value="" placeholder="未填写" placeholder-style="font-size: 24rpx;" style="width: 150rpx;margin-top: 32rpx;font-size: 24rpx;display: inline-flex;"
				 maxlength="4" v-model="nickname" />
				<image src="../../static/jiantou.png" style=" width: 12.8rpx;height: 22rpx;margin-right: 19rpx;"></image>
			</view>
		</view>
		<!-- 认证状态 -->
		<view class="renz">
			<text style="font-size: 31rpx;margin-left: 31rpx;">实名认证</text>
			<view v-show="sm_state=='已认证'" @tap="xigai">
				<image src="../../static/yirenz.png" mode="" style="width: 90rpx;height: 32rpx;margin-right: 56rpx;"></image>
				<text style="font-size: 24rpx;margin-right: 20rpx;">修改</text>
				<image src="../../static/jiantou.png" style=" width: 12.8rpx;height: 22rpx;margin-right: 19rpx;"></image>
			</view>
			<view v-show="sm_state=='未认证'" @tap="authen">
				<image src="../../static/wrenz.png" mode="" style="width: 90rpx;height: 32rpx;margin-right: 56rpx;"></image>
				<text style="font-size: 24rpx;margin-right: 20rpx;">去认证</text>
				<image src="../../static/jiantou.png" style=" width: 12.8rpx;height: 22rpx;margin-right: 19rpx;"></image>
			</view>
		</view>
		<!-- 联系方式 -->
		<view class="lianx">
			<text style="font-size: 31rpx;margin-left: 31rpx;">联系方式</text>
			<view>
				<input type="text" value="" placeholder="未填写" placeholder-style="font-size: 24rpx;" style="width: 154rpx;margin-top: 32rpx;font-size: 24rpx;display: inline-flex;"
				 v-model="contact" />
				<image src="../../static/jiantou.png" style=" width: 12.8rpx;height: 22rpx;margin-right: 19rpx;margin-left: 10rpx;"></image>
			</view>
		</view>
		<!-- 保存已修改的资料 -->
		<view style="margin-top: 80rpx;">
			<button @tap="sub" type="primary" :style="{background:button_color}" class="button_color"><text
				 style="font-size:28rpx;font-weight:300;color:rgba(255,255,255,1);line-height:80rpx;">保存</text></button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				button_color:'',//按钮颜色
				sm_state: '', // 认证状态
				nickname: '', // 昵称
				contact: '', // 联系方式
				toxiang: '../../static/touxia.png', // 头像
				xianstx: false,
				toxia_id:'', // 头像id
			}
		},
		onShow: function() {
			var shangchen = this.getModels('1');
			if (shangchen) {
				this.xianstx = true
			}
			console.log(shangchen);
			this.usersai()
			this.button_color = uni.getStorageSync('button_color');
		},
		methods: {
			// 获取用户详情
			usersai() {
				var vm = this
				vm.myPost(
					'api/Userapi/getuser', {},
					function(res) {
						console.log(res);
						if (res.code == 200) {
							vm.nickname = res.data.nickname
							vm.contact = res.data.contact
							if (res.data.head_img) {
								vm.toxiang = res.data.head_img
							}

							var statu = res.data.authentication
							if (statu == 1) {
								vm.sm_state = '已认证'
							} else if (statu == 0) {
								vm.sm_state = '未认证'
							}
						}
					}
				)
			},
			// 上传头像
			upfiles(){
				var vm = this
				this.UpFile('api/publicapi/upfile',function(res){
					console.log(res);
					if(res.code == 200){
						vm.toxiang = res.data.quan_path
						vm.toxia_id = res.data.id
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				},{width:90})
			},
			// 修改实名认证页面跳转事件
			xigai(){
				uni.navigateTo({
					url: '/pages/personal_center/real_name'
				})
			},
			// 实名认证页面跳转事件
			authen(){
				uni.navigateTo({
					url: '/pages/personal_center/non_real_name'
				})
			},
			// 保存按钮
			sub() {
				var vm = this
				var data = {
					nickname: vm.nickname,
					head_img: vm.toxia_id,
					contact: vm.contact
				}
				
				vm.myPost(
					'api/userapi/change_user_info', data,
					function(res) {
						console.log(res);
						if (res.code == 200) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							if(vm.xianstx==true){
								setTimeout(function() {
									uni.switchTab({
										url: '/pages/personal_center/my_shop'
									},500)
								})
							}else{
								setTimeout(function() {
									uni.switchTab({
										url: '/pages/personal_center/my_beha'
									},500)
								})
							}
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					}
				)
			}
		}
	}
</script>

<style>
	.button_color{
		width:607rpx;height:88rpx;background:#3187D5;border-radius:44rpx;
	}
	.nicens {
		width: 690rpx;
		height: 120rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		line-height: 120rpx;
		margin-top: 15rpx;
		margin-left: 20rpx;
	}

	.nicen {
		width: 690rpx;
		height: 91rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		line-height: 91rpx;
		margin-top: 2rpx;
		margin-left: 20rpx;
	}

	.nicenr {
		width: 690rpx;
		height: 91rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		line-height: 91rpx;
		margin-top: 15rpx;
		margin-left: 20rpx;
	}

	.renz {
		width: 690rpx;
		height: 91rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		line-height: 91rpx;
		margin-top: 2rpx;
		margin-left: 20rpx;
	}

	.lianx {
		width: 690rpx;
		height: 91rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		line-height: 91rpx;
		margin-top: 2rpx;
		margin-left: 20rpx;
	}
</style>
